<template>
    <div class="video_t">
        <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <div class="vidao-mains">
            <dv-border-box-1>

            </dv-border-box-1>
        </div>

        <div class="vidao-main">
            <VideoPlayer :mp4Url="`http://vjs.zencdn.net/v/oceans.mp4`" />
        </div>
        <!-- <div class="video_d" v-for="item in data">
            <div class="video_p">
                <p class="video_p1">{{ item.name }}</p>
                <p class="video_p1">{{ item.time }}</p>
            </div>
            <div class="video_v"></div>
            <div class="video_b">
                <div class="video_b_l">
                    <div class="video_b_l_d">
                        <img class="video_b_l_d_img" src="@/assets/ThreeD/left1.png" alt="">
                    </div>
                    <div class="video_b_l_d">
                        <img class="video_b_l_d_img" src="@/assets/ThreeD/left2.png" alt="">
                    </div>
                    <div class="video_b_l_d">
                        <img class="video_b_l_d_img" src="@/assets/ThreeD/left3.png" alt="">
                    </div>
                    <div class="video_b_l_d">
                        <img class="video_b_l_d_img" src="@/assets/ThreeD/left4.png" alt="">
                    </div>
                    <div class="video_b_l_d">
                        <img class="video_b_l_d_imgs" src="@/assets/ThreeD/left5.png" alt="">
                    </div>
                </div>
                <div class="video_b_r"></div>
            </div>
        </div> -->
    </div>
</template>
<script>
import VideoPlayer from './VideoPlayer.vue';
export default {
    components: {
        VideoPlayer
    },
    props: ["data"],
    data() {
        return {
            options: [{
                value: '1',
                label: '摄像头1'
            }, {
                value: '2',
                label: '摄像头2'
            }],
            value: '1'
        }
    },
    mounted() {
        // this.area()
    },
    methods: {
    }
}
</script>
<style lang="scss">
.el-select {
    .el-input__inner {
        background-color: #98a2ae; // 背景为黑色
        color: #ffffff; // 字体为白色
        border: 1px solid #98a2ae; // 可选：修改边框颜色
    }
}

// 修改 el-option 的样式
.el-scrollbar__view {
    background-color: #98a2ae;
    padding: 0;
}

.el-select-dropdown__list {
    padding: 0;
}

.el-select-dropdown {
    background-color: #98a2ae; // 下拉菜单背景为黑色
    border: 1px solid #98a2ae;

    .el-scrollbar {
        background-color: #98a2ae;
    }

    .el-select-dropdown__item {
        color: #ffffff; // 字体为白色

        &:hover {
            background-color: #1e384f; // 悬停时背景颜色
        }

        &.selected {
            color: #ffffff; // 选中时字体颜色
            background-color: #1e384f; // 选中时背景颜色
        }
    }
}
</style>
<style lang="scss" scoped>
.video_t {
    position: relative;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;


    .video_d {
        position: relative;
        background: url("@/assets/ThreeD/video.png");
        background-size: 100% 100%;
        width: 160px;
        height: 128px;
        padding: 9px 8px 0px 7px;
        margin-bottom: 10px;

        .video_p {
            display: flex;
            justify-content: space-between;

            .video_p1 {
                padding: 0;
                margin: 0;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                font-size: 10px;
                color: #CCCCCC;
            }
        }

    }

    .video_v {
        margin-top: 1px;
        width: 160px;
        height: 90px;
        background-color: green;
    }

    .video_b {
        display: flex;
        justify-content: space-between;
        height: 20px;

        .video_b_l {
            display: flex;
            align-items: center;
            margin-top: 5px;

            .video_b_l_d {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 17px;
                height: 15px;
                background: #043148;
                border: 1px solid #028FC1;
                margin-right: 5px;

                .video_b_l_d_img {
                    width: 7px;
                    height: 7px;
                }

                .video_b_l_d_imgs {
                    width: 7px;
                    height: 2px;
                }
            }
        }

        .video_b_r {
            position: absolute;
            right: 4px;
            bottom: 3px;
            width: 20px;
            height: 20px;
            background: url("@/assets/ThreeD/video2.png");
            background-size: 100% 100%;
        }
    }
}

.vidao-mains {
    top: 45px;
    left: -7.5px;
    position: absolute;
    // margin-top: 20px;
    width: 375px;
    height: 290px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vidao-main {
    margin-top: 20px;
    margin-left: 5px;
    width: 350px;
    height: 258px;
    border-radius: 20px;
    overflow: hidden;
}
</style>